<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">专家联评</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="chart_ptrend"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "expertJointEval",
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      option: null,
      dataMap: {},
      chartData: [],
      subjectNameList: [],
      periodList: [],
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: true,
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      const list = this.allData.filter((el) => el.scoreType === "2");
      if (list.length > 0) {
        this.chartData = list.map((el) => {
          const obj = { data: [] };
          const list = el.subjectName.map((v, key) => {
            return {
              name: v,
              value: Number(el.score[key]),
            };
          });
          obj.data = list;
          return obj;
        });
        this.subjectNameList = list[0].subjectName;
        this.periodList = list.map((el) => el.period);
        this.getEchart();
      } else {
        this.chartData = [];
        this.subjectNameList = [];
        this.periodList = [];
        this.getEchart()
      }
    },
    getEchart() {
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById("chart_ptrend"));
      let itemStyle = {
        barBorderRadius: [15, 0],
        color: "#0084ff",
      };
      const params = this.chartData;
      const options = [];
      if (params.length) {
        for (let item of params) {
          const serItem = {
            series: [
              {
                data: item.data,
                itemStyle: itemStyle,
              },
            ],
          };
          options.push(serItem);
        }
      }

      this.option = {
        baseOption: {
          timeline: {
            axisType: "category",
            autoPlay: true,
            playInterval: 1000,
            data: this.periodList,
            left: 80,
            right: 80,
            bottom: 10,
            lineStyle: {
              color: "#179bf1",
            },
            label: {
              color: "#fff",
            },
            checkpointStyle: {
              color: "#01d8ff",
              symbolSize: 10,
              borderColor: "rgba(1, 216, 255, 0.5)",
              borderWidth: 5,
            },
            controlStyle: {
              show: false,
            },
            itemStyle: {
              borderColor: "#004b85",
              borderWidth: 1,
              shadowColor: "rgba(1, 216, 225, 0.5)",
              shadowBlur: 5,
            },
            emphasis: {
              label: {
                color: "#01d8ff",
                show: false,
              },
              checkpointStyle: {
                color: "#01d8ff",
                borderColor: "rgba(1, 216, 255, 0.5)",
                borderWidth: 5,
              },
              itemStyle: {
                color: "#01d8ff",
                borderColor: "rgba(1, 216, 225, 0.5)",
                borderWidth: 5,
              },
            },
          },
          calculable: true,
          grid: {
            top: "10%",
            bottom: "25%",
          },
          xAxis: [
            {
              type: "category",
              axisLabel: {
                interval: 0,
              },
              data: this.subjectNameList,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#2867a8",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "分",
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#2867a8",
                },
              },
            },
          ],
          series: [
            {
              name: "",
              type: "bar",
              barWidth: 15,
              legendHoverLink: true,
              label: {
                show: true,
                position: "top",
                color: "#fff",
              },
            },
          ],
        },
        options,
      };
      myChart.setOption(this.option, true);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 666px;
  top: 666px;
  width: 586px;
  height: 400px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>
